<template>
  <div class="userSettingIndex">
    <userHeader />
    <div class="breadClum">
      <span>
            <router-link :to="{path:'/pageIndex'}"><a class="bread1">当前位置：首页  >  </a></router-link>
           <router-link :to="{path:'/systemSetting'}">  <a class="bread1">系统设置 ></a></router-link>
            <a class="bread2">个人设置</a>
      </span>
    </div>
    <div class="userSettingPage">
      <div class="navList">
        <span class="sp1" @click.stop="modifyPassword">修改密码</span>
        <span @click.stop="modifyPhone">修改联系方式</span>
      </div>
      <div class="userForm">
        <el-form ref="form" :model="form" label-width="205px">
          <el-form-item label="姓名:">
            <el-input v-model="form.real_name"></el-input>
          </el-form-item>
          <el-form-item label="单位:">
            <el-input v-model="form.company_name "></el-input>
          </el-form-item>
          <el-form-item label="部门:">
            <el-input v-model="form.section_name"></el-input>
          </el-form-item>
          <el-form-item label="角色:">
            <el-input v-model="form.user_position"></el-input>
          </el-form-item>
          <el-form-item label="联系电话:">
            <el-input v-model="form.user_phone"></el-input>
          </el-form-item>
          <el-form-item label="密码:">
            <el-input v-model="form.user_pwd" type="password"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <fixed />
    <el-dialog :title=title :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-form :model="editorForm" :rules="rules" ref="editorForm">
        <div v-if="modifyPass">
          <el-form-item label="密码" :label-width="formLabelWidth" prop="user_pwd">
            <el-input v-model="editorForm.user_pwd"  autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码" :label-width="formLabelWidth"  prop="newPassword">
            <el-input v-model="editorForm.newPassword" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" :label-width="formLabelWidth"  prop="passwordAgain">
            <el-input v-model="editorForm.passwordAgain" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div v-if="modifyTel">
          <el-form-item label="联系方式" :label-width="formLabelWidth"  prop="tel">
            <el-input v-model="editorForm.tel" autocomplete="off" ref="tel"></el-input>
          </el-form-item>
        </div>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ecancel">取 消</el-button>
        <el-button type="primary" @click="submitForm('editorForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <span>{{etips}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="confirmBtn">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  import {mapMutations} from 'vuex'
  import userHeader from '@/components/header.vue'
  import fixed from '@/components/fixed.vue'
  import {strToHexCharCode,toFixedBit,dec2hex,formatTime } from  '@/utils/index.js'
  var mdSecret ='fangyou968123456'

  export default({
      data(){
        var checkTel = (rule, value, callback) => {
          if (this.editorForm.tel==='') {
            return callback(new Error('联系方式不能为空'));
          }
            var reg2 =/^(((13|14|15|16|18|17|19)\d{9}))$/;
            if (!reg2.test(this.editorForm.tel)) {
              callback(new Error('请输入正确的联系方式'));
            } else {
              callback();
            }
        };
        var originPass = (rule, value, callback) => {
          if (value == '') {
            callback(new Error('请输入密码'));
          }else{
              callback()
          }

        };
        var validatePass = (rule, value, callback) => {
          if (value == '') {
            callback(new Error('请输入新密码'));
          }else if(value.length<6){
            callback(new Error('密码长度不得低于6位!'));
          }
          else {
            callback();
          }
        };
        var validatePass2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          }else if(value.length<6){
            callback(new Error('密码长度不低于6位!'));
          }
          else if (value != this.editorForm.newPassword) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
          return {
            modifySuccess:false,
            modifyFail:false,
            etips:'',
            title:'编辑',
            centerDialogVisible:false,
            editorForm:{
              user_pwd:'',
              tel:'',
              newPassword:'',
              passwordAgain:''
            },
            dialogFormVisible:false,
            formLabelWidth:'140px',
            form:{
              real_name:'',
              company_name:'',
              section_name:'',
              user_position:'',
              user_phone:'',
              user_pwd:'',
            },
            modifyTel:false,
            modifyPass:false,
            rules: {
              user_pwd: [
                { required: true,validator:originPass}
              ],
              newPassword:[
                { required: true,validator:validatePass}
              ],
              passwordAgain:[
                { required: true, validator:validatePass2}
              ],
              tel:[
                { required: true,validator:checkTel}
              ]
            },
          }
      },
    components:{
      userHeader,
      fixed

    },
    methods:{
      ...mapMutations(['saveUid','changeLoginStatus']),
      confirmBtn(){
          this.editorForm={
            user_pwd:'',
            tel:'',
            newPassword:'',
            passwordAgain:''
          };
          if(this.modifyPass){
            sessionStorage.setItem('token','')
            sessionStorage.setItem('user_id','')
            sessionStorage.setItem('user_name','')
            this.changeLoginStatus({
              isExit:0
            });
            this.saveUid({
              user_id:'',
              token:'',
              user_name:''
            });
            this.$router.push({
              path:'/'
            });
          }
          this.centerDialogVisible =false
      },
          initData(){
              this.axios.get('/api/v1/accout/users').then((res)=>{
                  this.form =res.data.data
                })
          },
      modifyPassword(){
        this.dialogFormVisible =true
        this.modifyPass =true
        this.title='修改密码'
      },
      modifyPhone(){
        this.dialogFormVisible =true
        this.modifyTel =true
        this.title='修改联系方式'
        this.editorForm.tel =this.form.user_phone
      },
      handleClose(){
          this.dialogFormVisible =false
          this.modifyPass=false
          this.modifyTel =false
      },
      ecancel(){
        this.dialogFormVisible =false;
        this.modifyPass =false;
        this.modifyTel =false
      },
      submitForm(formName) {
          let that =this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.modifyTel&&this.editorForm.tel!=this.form.user_phone){
              this.dialogFormVisible =false;
              this.modifyTel =false;
              this.axios.put('/api/v1/accout/users/asd',
                {
                  user_phone:this.editorForm.tel
                }).then((res)=>{
                  this.editorForm={
                    user_pwd:'',
                    tel:'',
                    newPassword:'',
                    passwordAgain:''
                  };
                  if(res.data.code==0){
                    this.$alert(res.data.message,'提示');
//                    this.etips =res.data.message
                    this.form.user_phone =this.editorForm.tel
//                    this.centerDialogVisible =true
                  }else {
//                    this.etips =res.data.message
                    this.$alert(res.data.message,'提示');
//                    this.centerDialogVisible =true
                  }
              })
            }else if(this.modifyPass){
                //修改密码
              this.dialogFormVisible =false;
              this.modifyPass =false;
              this.axios.put('/api/v1/accout/users/asd',{
                user_pwd:this.editorForm.user_pwd,
                new_pwd:this.editorForm.newPassword,
                new_pwd_confirm:this.editorForm.passwordAgain
              }).then((res)=>{
                  console.log(that.$refs.editorForm);
                  this.editorForm={
                    user_pwd:'',
                    tel:'',
                    newPassword:'',
                    passwordAgain:''
                  };
                  if(res.data.code==0){
//                      this.centerDialogVisible =true
                      this.modifyPass =true;
//                      that.etips =res.data.message;
                      this.$alert('密码修改成功,点击重新登录','提示',{
                        callback:actinon=>{
                           sessionStorage.clear();
                          that.$router.push({
                            path:'/'
                          })
                        }
                      })
                  }else {

//                    this.centerDialogVisible =true
                    this.modifyPass =false;
                    this.$alert(res.data.message,'提示');
//                    that.etips =res.data.message;
//                    setTimeout(()=>{
//                      that.modifyFail=true
//                    },500)
                  }
              })
            }else {
                console.log('手机号码未做修改')
                this.dialogFormVisible=false
                this.modifyTel =false
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
    mounted(){
          this.initData()
    }
  })
</script>

<style scoped>
.userSettingIndex{
  width: 100%;
  height: 100%;
  background: white;
}
.userSettingIndex.navList{
  height: 60px;
  border-bottom: 1px solid #eee;
}
.userSettingIndex .navList span{
  display: inline-block;
  padding:10px 20px;
  background: #8bc34a;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  font-size: 16px;
  color: white;
  margin-right: 7px;
  margin-top: 10px;
}
.userSettingIndex .navList .sp1{
  margin-left: 10px;
}
.userSettingIndex  .userForm{
    height: 330px;
    background: #eee;
    margin: 30px;
    overflow: hidden;
  }
.userSettingIndex .userForm  .el-form{
  margin-top:83px ;
}
.userSettingIndex .userForm  .el-form >>> .el-form-item{
  margin-bottom: 5px;
}
.userSettingIndex .userForm  .el-form >>> .el-form-item .el-input__inner{
  border: none;
  background: #eee;
  pointer-events: none;
  height: 22px;
  line-height: 22px;
}
.userSettingIndex .userForm  .el-form >>> .el-form-item .el-form-item__content{
  line-height: 22px;
}
.userSettingIndex .userForm  .el-form >>> .el-form-item  .el-form-item__label{
  line-height: 22px;
  color: #333333;
}
.userSettingIndex >>> .el-dialog{
    width: 760px;
}
.userSettingIndex >>>  .el-dialog   .el-form     .el-form-item{
  margin-bottom: 24px;
}
  .userSettingIndex .el-alert{
      width: 380px;
      position: absolute;
      height: 30px;
      left: 0;
      right: 0;
      top:0;
      bottom: 0;
      margin: auto;
  }
  .userSettingIndex .navList{
    border-bottom: 0;
  }
</style>
